<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>管理员登录 - 通用管理系统</title>
  <link href="/assets/common/css/layui.css" rel="stylesheet">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
<style>
body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Microsoft YaHei', sans-serif;
}
.login-container {
  width: 400px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  padding: 40px;
  backdrop-filter: blur(10px);
}
.login-header {
  text-align: center;
  margin-bottom: 30px;
}
.login-header h2 {
  color: #333;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}
.login-header p {
  color: #666;
  font-size: 14px;
  margin: 0;
}
.layui-form-item {
  margin-bottom: 20px;
}
.layui-input-wrap {
  border-radius: 8px;
  overflow: hidden;
}
.layui-input {
  height: 45px;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  transition: all 0.3s ease;
}
.layui-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}
.login-btn {
  height: 45px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.captcha-img {
  height: 45px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #e6e6e6;
  transition: all 0.3s ease;
}
.captcha-img:hover {
  border-color: #667eea;
}
.login-tips {
  text-align: center;
  margin-top: 20px;
  color: #999;
  font-size: 12px;
}
</style>

<div class="login-container">
  <div class="login-header">
    <h2>管理员登录</h2>
    <p>通用管理系统</p>
  </div>
  
  <form class="layui-form" id="loginForm">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="username" value="" lay-verify="required" placeholder="请输入用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="password" value="" lay-verify="required" placeholder="请输入密码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
      </div>
    </div>
    
    <div class="layui-form-item">
      <div class="layui-row">
        <div class="layui-col-xs7">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-vercode"></i>
            </div>
            <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
          </div>
        </div>
        <div class="layui-col-xs5">
          <div style="margin-left: 10px;">
            <img id="captchaImg" class="captcha-img" src="/admin/login/captcha" onclick="refreshCaptcha()" title="点击刷新验证码">
          </div>
        </div>
      </div>
    </div>
    
    <div class="layui-form-item">
      <input type="checkbox" name="remember" lay-skin="primary" title="记住登录状态">
    </div>
    
    <div class="layui-form-item">
      <button type="submit" class="layui-btn layui-btn-fluid login-btn" lay-submit lay-filter="admin-login">登录</button>
    </div>
  </form>
  
  <div class="login-tips">
    <p>© 2024 通用管理系统 - 安全登录</p>
  </div>
</div>
  
<script src="/assets/common/layui.js"></script> 
<script>
layui.use(['form', 'layer', 'jquery'], function(){
  var form = layui.form;
  var layer = layui.layer;
  var $ = layui.jquery;
  
  // 登录表单提交
  form.on('submit(admin-login)', function(data){
    var field = data.field;
    
    // 验证表单
    if (!field.username) {
      layer.msg('请输入用户名', {icon: 2});
      return false;
    }
    if (!field.password) {
      layer.msg('请输入密码', {icon: 2});
      return false;
    }
    if (!field.captcha) {
      layer.msg('请输入验证码', {icon: 2});
      return false;
    }
    
    // 显示加载层
    var loadIndex = layer.load(1, {
      shade: [0.3, '#000']
    });
    
    // Ajax提交登录
    $.ajax({
      url: '/admin/login/authenticate',
      type: 'POST',
      data: field,
      dataType: 'json',
      success: function(res) {
        layer.close(loadIndex);
        
        if (res.code === 200) {
          layer.msg('登录成功！', {icon: 1, time: 1500}, function(){
            // 跳转到后台首页
            window.location.href = '/admin/dashboard';
          });
        } else {
          layer.msg(res.msg || '登录失败', {icon: 2});
          // 刷新验证码
          refreshCaptcha();
        }
      },
      error: function(xhr, status, error) {
        layer.close(loadIndex);
        layer.msg('网络错误，请重试', {icon: 2});
        refreshCaptcha();
      }
    });
    
    return false; // 阻止默认表单提交
  });
  
  // 回车键登录
  $(document).keydown(function(event) {
    if (event.keyCode === 13) {
      $('#loginForm').find('button[lay-submit]').click();
    }
  });
});

// 刷新验证码
function refreshCaptcha() {
  var captchaImg = document.getElementById('captchaImg');
  captchaImg.src = '/admin/login/captcha?t=' + new Date().getTime();
}

// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
  // 自动聚焦到用户名输入框
  document.querySelector('input[name="username"]').focus();
});
</script>

</body>
</html>